<template>
  <div>
    
    <div class="search">
      <el-input placeholder="请输入内容" class="input"></el-input>
      <el-button icon="el-icon-search"></el-button>
      <el-button type="success" @click="addStu">添加项目</el-button>
    </div>
    <!-- 选择器 -->
    <template>
      <el-select v-model="value"
                 filterable
                 placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </template>
    <!-- 表格 -->
    <template>
      <el-table :data="stuData"
                v-loading="loading"
                border
                style="line-height: 40px" >
        <el-table-column prop="headimgurl"
                          align="center"
                         label="头像"
                         width="180">
                  <template scope="scope">
                    <img :src="scope.row.headimgurl" alt="" width="50">
                  </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                          align="center"
                         >
        </el-table-column>
        <el-table-column prop="class"
                         label="班级"
                          align="center">
        </el-table-column>
         <el-table-column prop="productUrl"
                         label="项目"
                          align="center">
        </el-table-column>
        <el-table-column label="操作" width="300"  align="center">
             <template scope ="{row}">
                <el-button type="primary"
                          class="btn"
                           align="center"
                          icon="el-icon-view">查看</el-button>
           <el-button type="primary"
                          class="btn"
                           align="center"
                          icon="el-icon-edit" @click="editStu(row)">编辑</el-button>
            <el-button type="danger"
                          class="btn"
                           align="center"
                          icon="el-icon-delete" @click="deleteStu(row)">删除</el-button>
            </template>                           
            
           
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页器 -->
    <el-pagination background
                   layout="prev, pager, next"
                   :total="1000">
    </el-pagination>
    <dia-log></dia-log>
  </div>
</template>
<script>
import dialog from '../../../components/dialog';
import { getStuList,delStu } from "@/api"

export default {
  components: {
    "dia-log":dialog
  },
  data () {
    return {
      //表格数据
      loading:true,
      stuData: [
        // {
        //   name:"123",
        //   productUrl:"123",
        //   avatarUrl:"123",
        //   classes:"123"
        // }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods:{

 // 编辑学员
    editStu (row) {
      this.$bus.$emit('editStuEvent', row)
    },
// 删除学员
    deleteStu (row) {
      console.log(row)
      if (row && row.sId) {
        // 让用户确认是否删除
        this.$confirm('此操作将永久删除该文件, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          // 用户企鹅人删除
          // 调用删除请求
          delStu(row.sId)
            .then(res => {
              if (res.data && res.data.state) {
                // 删除成功
                this.$message.success('删除成功')
                this.updateStuTable()
              } else {
                this.$message.warning('删除失败')
              }
            })
            .catch(err => {
              this.$message.error('删除出错')
            })
        }).catch(() => {
          // 用户取消删除
          this.$message('已取消删除')
        })
      } else {
        // 没有row
        this.$message.error('没有传入row对象')
      }
    },
    //增加学员
    addStu(){
      //弹出
      this.$bus.$emit('showDialog',"row")
     
    },
    //更新表格数据
    updateStuTable(){
      getStuList()
      .then(res=>{
        if(res.data && res.data.data){
          this.stuData = res.data.data
          this.loading = false
        }else{
          this.$message.error('数据获取失败')
        }
      })
      .catch(err =>{
        this.$message.error('数据获取失败,或者网络错误')
      })
    }
  },
  mounted () {
    //页面加载 获取数据
    this.updateStuTable()
    this.$bus.$on('updateStuTable',()=>{
      this.updateStuTable()
    })
  }
}
</script>
<style>
.search{
  line-height: 50px;
}
.input{
  
  width: 50%!important;
}
.btn{
  width: 75px;
}
</style>